<template>
    <div class="record-oss">
        <el-row>
            <el-col :span="6">
                <div class="left-wrap">
                    <div class="search-wrap">
                        <el-select v-model="channelId" :placeholder="$t('record.record-oss.80878-3')" @change="changeChannel" style="width: 100%" size="small">
                            <el-option v-for="option in channelList" :key="option.value" :label="option.label" :value="option.value"></el-option>
                        </el-select>
                        <el-date-picker
                            size="small"
                            style="width: 100%"
                            v-model="chooseDate"
                            :picker-options="pickerOptions"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :placeholder="$t('record.record-oss.80878-0')"
                            @change="changeDate()"
                        ></el-date-picker>
                    </div>
                    <div class="node-data">
                        <ul v-if="detailFiles.length > 0" v-infinite-scroll="infiniteScroll">
                            <li v-for="(item, index) in detailFiles" :key="index">
                                <el-tag v-if="choosedFile != item" @click="chooseFile(item)">
                                    <i class="el-icon-video-camera"></i>
                                    {{ item.substring(0, 17) }}
                                </el-tag>
                                <el-tag type="danger" v-if="choosedFile == item">
                                    <i class="el-icon-video-camera"></i>
                                    {{ item.substring(0, 17) }}
                                </el-tag>
                                <a class="el-icon-download icon" :href="`${getFileBasePath()}/download.html?url=file/download/rtp/${stream}/${chooseDate}/${item}`" target="_blank" />
                                <a class="el-icon-upload icon" @click="uploadOss(item)" />
                            </li>
                        </ul>
                        <el-empty v-if="detailFiles.length == 0" class="no-data" :image-size="100" :description="$t('sip.mediaServer.998535-6')"></el-empty>
                    </div>
                    <pagination
                        style="bottom: 63px; right: 10px"
                        v-show="total > queryParams.pageSize"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        small
                        layout="prev, pager, next"
                        @pagination="queryRecordDetails"
                        :pager-count="5"
                        v-if="this.chooseDate !== null"
                    />
                </div>
            </el-col>
            <el-col :span="18">
                <div class="right-wrap">
                    <player ref="recordVideoPlayer" :videoUrl="videoUrl" :height="true"></player>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import moment from 'moment';
import { getServerRecordByDevice, uploadRecord } from '@/api/iot/record';
import player from '@/views/components/player/easyplayer.vue';
import { listChannel } from '@/api/iot/channel';

export default {
    name: 'ReocrdOss',
    components: {
        player,
    },
    props: ['device'],
    data() {
        return {
            recordListStyle: {
                height: this.winHeight + '20px',
            },
            playerStyle: {
                margin: 'auto',
                'margin-bottom': '0px',
                height: this.winHeight + 'px',
            },
            winHeight: window.innerHeight - 320,
            dateFilesObj: [],
            detailFiles: [],
            chooseDate: '',
            videoUrl: null,
            choosedFile: null,
            deviceId: '',
            channelId: '',
            channelList: [],
            stream: '',
            queryDate: new Date(),
            currentPage: 1,
            count: 1000000,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 12,
                deviceSipId: null,
            },
            pickerOptions: {
                cellClassName: (date) => {
                    // 通过显示一个点标识这一天有录像
                    let time = moment(date).format('YYYY-MM-DD');
                    if (this.dateFilesObj[time]) {
                        return 'data-picker-true';
                    } else {
                        return 'data-picker-false';
                    }
                },
            },
        };
    },
    watch: {
        // 获取到父组件传递的device后
        device: function (newVal, oldVal) {
            const deviceInfo = newVal;
            if (deviceInfo && deviceInfo.deviceId !== 0) {
                this.deviceId = this.device.serialNumber;
            }
        },
    },
    mounted() {
        this.recordListStyle.height = this.winHeight + 'px';
        this.playerStyle['height'] = this.winHeight + 'px';
    },
    created() {
        this.deviceId = this.device.serialNumber;
        this.getList();
    },
    methods: {
        /** 查询监控设备通道信息列表 */
        getList() {
            this.queryParams.deviceSipId = this.deviceId;
            listChannel(this.queryParams).then((response) => {
                this.channelList = response.rows.map((item) => {
                    return { value: item.channelSipId, label: item.channelName };
                });
            });
        },
        changeDate() {
            this.detailFiles = [];
            this.currentPage = 1;
            if (this.channelId !== '') {
                this.queryRecordDetails();
            }
        },
        // 改变通道
        changeChannel() {
            this.detailFiles = [];
            this.currentPage = 1;
            this.channelId = this.channelId;
            this.stream = 'gb_playrecord_' + this.deviceId + '_' + this.channelId;
            if (this.chooseDate !== '') {
                this.queryRecordDetails();
            }
        },
        infiniteScroll() {
            if (this.total > this.detailFiles.length) {
                this.currentPage++;
                this.queryRecordDetails();
            }
        },
        queryRecordDetails: function () {
            const query = {
                deviceId: this.deviceId,
                channelId: this.channelId,
                startTime: this.chooseDate + ' 00:00:00',
                endTime: this.chooseDate + ' 23:59:59',
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
            };
            getServerRecordByDevice(query).then((res) => {
                console.log(res);
                if (res.code === 200) {
                    this.total = res.data.total;
                    console.log(this.total);
                    this.detailFiles = res.data.list;
                    this.recordApi = res.data.recordApi;
                }
            });
        },
        chooseFile(file) {
            this.choosedFile = file;
            if (file == null) {
                this.videoUrl = '';
            } else {
                this.videoUrl = `${this.getFileBasePath()}/file/download/rtp/${this.stream}/${this.chooseDate}/${this.choosedFile}`;
                console.log(this.videoUrl);
            }
        },
        uploadOss(item) {
            console.log(item);
            const query = {
                recordApi: this.recordApi,
                file: '/rtp/' + this.stream + '/' + this.chooseDate + '/' + item,
            };
            console.log(query);
            uploadRecord(query).then((res) => {
                if (res.code === 200) {
                    console.log(res);
                    this.$modal.msgSuccess(this.$t('record.record-oss.80878-4'));
                }
            });
        },
        getFileBasePath() {
            return this.recordApi;
        },
    },
};
</script>

<style>
.data-picker-true:after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #606060;
    border-radius: 4px;
    left: 45%;
    top: 74%;
}
</style>
<style lang="scss" scoped>
.record-oss {
    .left-wrap {
        position: relative;
        flex-direction: column;
        width: 100%;
        padding-right: 20px;

        .search-wrap {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
        }

        .no-data {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-55%, -52%);
            height: 517px;
        }

        .node-data {
            color: #486ff2;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            margin-top: 10px;
            padding: 10px;
            height: 517px;

            ul {
                list-style-type: none;
                padding: 0;
                margin: 0;

                li {
                    margin-bottom: 10px;
                    cursor: pointer;

                    .icon {
                        margin-left: 10px;
                    }
                }
            }
        }
    }

    .right-wrap {
        height: 559px;
        width: 100%;
    }
}
</style>
